<template>
	<view class="container">
		<!-- 宇航员 -->
		<image class="astronaut-img" src="/static/people.png"></image>
		<image class="now-checked" src="/static/lightHigh-icon.png"></image>
		<view class="wrap" @touchstart="startHandle" @touchmove="moveHandle" @touchend="endHandle">
			<view class="box" :style="{transform: `perspective(6000rpx) rotateX(-24deg) rotateY(${Y}deg) translateY(178rpx) translateX(328rpx)` }">
				<view v-for="(item, i) in list" :key="i" @click.stop="clickHandle(item,index)" 
					:style="{transform: `rotateY(${item.deg}deg) translateZ(390rpx)`  }" 
					class="itemBox">
					<view class="testBox" 
					:class="[ index == i ? '' : 'test2', i == rightIndex ? 'rightSty':'', i==leftIndex ?'leftSty': '' ]">
						<image :class="[index == i ? 'active' : '' ]" :src="item.icon"></image>
						<view :class="[index == i ? 'active' : '' ]">{{ $t('memory.' + item.title)}}</view>
					</view>
				</view>
			</view>
		</view>
		<tab-bar :curIndex="1"></tab-bar>
	</view>
</template>

<script>
	import TabBar from '@/pages/components/tab-bar/index.vue'
	export default {
		components:{
			TabBar
		},
		data () {
			return {
				deg: 0,
				Y: 0,
				clientX: 0, // 
				moveX: 0,
				direction: -1, // 1 == 向左  2==向右
				difference: 0, // 滑动距离  
				index: 0, // 
				isStart: false,
				leftIndex: null, // 左边第一个元素 （以当前index为准）
				leftIndex2: null, // 左边第二元素
				rightIndex: null,
				rightIndex2: null,
				oneDeg: 15, // 左侧/右侧第一个偏移度数
				towDeg: 20  ,// 左侧/右侧第er个偏移度数
				list:[
					{
						icon: '/static/planet-1.png',
						selectIcon: '/static/planet-1.png',
						title: 'recently',
						deg: 0
					},
					{
						icon: '/static/planet-2.png',
						selectIcon: '/static/planet-2.png',
						title: 'identity',
						deg: 0
					},
					{
						icon: '/static/planet-3.png',
						selectIcon: '/static/planet-3.png',
						title: 'love',
						deg: 0
					},
					{
						icon: '/static/planet-4.png',
						selectIcon: '/static/planet-4.png',
						title: 'idea',
						deg: 0
					},
					{
						icon: '/static/planet-5.png',
						selectIcon: '/static/planet-5.png',
						title: 'experience',
						deg: 0
					},
					{
						icon: '/static/planet-6.png',
						selectIcon: '/static/planet-6.png',
						title: 'personality',
						deg: 0
					}
				],
				leftAndright1Deg:15,
				leftAndright2Deg: 20,
			}
		},
		created(){
			this.oneDeg = this.leftAndright1Deg
			this.towDeg = this.leftAndright2Deg
			this.deg = 360 / this.list.length;
			this.list.forEach((item, index) => {
				item.deg = this.deg* (index +1)
			})
		},
		beforeMount(){
			
		},
		mounted(){
			let selft = this
			this.deg = 360 / this.list.length;
			this.index = this.list.length - 1
			
			this.setStyle(this.index)
			console.log(this.list, this.deg, this.index, this.list)
		},
		methods:{
			startHandle(e){
				if(this.isStart) return;
				this.isStart = true
				this.clientX = e.changedTouches[0].clientX
			},
			moveHandle(e){
				let clientX = e.changedTouches[0].clientX
				this.difference = Math.abs(this.clientX - clientX)
				if(this.clientX >clientX){ // 向左转
					this.direction = 1
				}else if(this.clientX <clientX){ // 向右转
					this.direction = 2
				}
			},
			endHandle(e){
				if(this.difference < 20){ // 滑动距离过小, 不做处理
					this.isStart = false
					return
				} 
				if(this.direction == 1){// 向左转
					this.Y -= this.deg
					this.index = (this.index +1) % this.list.length
				}else if(this.direction == 2){ // 向右转
					this.Y += this.deg
					if(this.index == 0) this.index = this.list.length;
					this.index = (this.index -1) % this.list.length
				}
				this.difference = 0
				this.direction = -1
				setTimeout(_ =>{
					this.isStart = false
				}, 500)
				this.setStyle(this.index)
				this.$emit('change', this.index)
			},
			clickHandle(item,index){
				let i = ''
				let list = this.list
				for(let j=0;j<list.length; j++){
					if(list[j].title == item.title){
						i = j
						break
					}
				}
				if(i == index){
					this.$emit('gotoHandle',index)
				}
			},
			setStyle(index){
				// 计算右侧第一个元素下标
				this.rightIndex = (this.index +1) % this.list.length
				// 计算右侧第二个元素下标
				if(this.rightIndex == this.list.length -1){
					this.rightIndex2 = 0
				}else{
					this.rightIndex2 = this.rightIndex + 1
				}
				// 计算左侧第一个元素下标
				if(this.index == 0){
					this.leftIndex = this.list.length-1;
				}else{
					this.leftIndex = (this.index -1) % this.list.length;
				}
				// 计算左侧第二个元素下标
				if(this.leftIndex == 0){
					this.leftIndex2 = this.list.length -1
				}else{
					this.leftIndex2 = this.leftIndex -1
				}
				
				this.list.forEach((item, index) =>{
					let deg = this.deg* (index +1)
					let leftOneDeg = deg -this.oneDeg
					let rightOneDeg = deg +this.oneDeg
					let leftTwoDeg = deg -this.towDeg
					let rightTwoDeg = deg +this.towDeg
					if(index == this.rightIndex ){
						item.deg = leftOneDeg
					}else if(index == this.leftIndex){
						item.deg = rightOneDeg
					}else if(index == this.rightIndex2){
						item.deg = rightTwoDeg
					}else if(index == this.leftIndex2){
						item.deg = leftTwoDeg
					}
					else{
						item.deg = deg
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url('/static/memory-bg.jpg') top center no-repeat;
		background-size: 100%;
		position: relative;
	}
	.wrap{
		width: 100%;
		height: 558rpx;
		background: url('/static/star-bg.png') no-repeat;
		background-size: 100%;
		position: absolute;
		top: 140rpx;
	}
	.box{
		width: 100%;
		height: 750rpx;
		position: absolute;
		box-sizing: border-box;
		transform-style: preserve-3d;
		transform: perspective(600rpx) rotateX(-10deg) translateY(-50%);
		transition: all .5s;
		.itemBox{
			width: 150rpx;
			height: 100rpx;
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			perspective:100;
			.testBox{
				width: 300rpx;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				image{
					margin-right: 20rpx;
					width: 52rpx;
					height: 52rpx;
					&.active{
						transform: scale(1.2);
					}
				}
				
				view{
					font-size: 24rpx;
					color: #B3BBC8;
					transition: all .5s;
				}
				.active{
					color: #fff;
				}
			}
			.test2{
				transform: rotateY(180deg);
			}
			.leftSty{
				transform: rotateY(0deg);
			}
			.rightSty{
				transform: rotateY(0deg);
			}
		}
	}
	.astronaut-img {
		width: 390rpx;
		height: 390rpx;
		position: absolute;
		top: 100rpx;
		left: 188rpx;
		z-index: 2;
	}
	.now-checked {
		position: absolute;
		top: 596rpx;
		left: 352rpx;
		width: 26rpx;
		height: 17rpx;
	}
	
</style>
